import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import Qt.labs.qmlmodels 1.0

import QtGraphicalEffects 1.15

//qmlscene
import "./"
Window {
    id:window
    title: qsTr("OPCG")
    width: 1280
    height: 720
    visible: true
    modality: Qt.WindowModal
    color: "#000000"
    // flags: Qt.Dialog | Qt.FramelessWindowHint
    signal signalConnectToServer()
    
    FontLoader {
        id: siyuan;
        source: "file:./resource/font/siyuan.otf"
    }
    
    
    
    property int percent: 0
    
    Rectangle{
        id:root
        x: 0
        y: 0
        radius: 8
        color: "#b5c8cd"
        width: parent.width
        height: parent.height
        visible: true
        
        
        //左边的信息栏
        Rectangle{
            x: 0 
            y: 0
            z:1
            id:menu
            color: "#63a0f1"
            height: parent.height
            width: 300
            anchors.left: parent.left
            anchors.verticalCenter:parent.verticalCenter
            
            //输入框
            Rectangle{
                id:inputFarme
                radius: 5
                height: 35
                width: parent.width-50
                anchors.horizontalCenter: parent.horizontalCenter
                
                anchors.top: parent.top
                anchors.topMargin: 200
                TextInput {
                    id:inputIp
                    width: parent.width
                    height: parent.height
                    font.pixelSize: 20
                    font.family:  siyuan.name
                    horizontalAlignment: Text.AlignHCenter//(1)
                    verticalAlignment: Text.AlignVCenter//(2)
                }
            }
            
            //按钮
            Rectangle{
                id:buttonFarme
                height: 50;
                width: parent.width-120
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 200+inputFarme.height+25
                color: buttonConnect.down ? "#63a0f1" : "#ffffff"
                radius: 5
                
                //连接按钮
                Button{
                    id:buttonConnect
                    z:1
                    height: parent.height-5
                    width: parent.width-5
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    background: Rectangle {
                        color: buttonConnect.down ? "#63a0f1" : "#ffffff"
                        radius: 5
                    }
                    Text {
                        id: name
                        text: qsTr("连接服务器")
                        //  color: "#63a0f1"
                        color: buttonConnect.down ? "#ffffff" : "#63a0f1"
                        font.family: siyuan.name
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        font.pointSize : parent.height/3
                    }
                    onClicked: {
                        if(name.text == "连接服务器"){
                            connectServer()
                        }else{
                            disconnectServer()
                        }
                    }
                    
                    
                }
                
                //连接状态
                ConicalGradient {
                    anchors.fill: buttonFarme
                    source: buttonFarme
                    enabled: percent != 0
                    visible: enabled
                    smooth: true       //平滑变形
                    antialiasing: true //抗锯齿
                    //  z:6
                    gradient: Gradient {
                        GradientStop { position: percent/100; color: "#ffffff" }
                        GradientStop { position: percent/100; color: "#52c41a" }
                    }
                }
            }
            
        }
        
        DropShadow {
            anchors.fill: menu
            horizontalOffset: 1
            verticalOffset: 1
            radius: 8.0
            samples: 16
            color: "#30000000"
            source: menu
            z:1
        }
        
        //右边主体
        Rectangle{
            id:body
            y:0
            x:0
            
            height: parent.height
            width: parent.width-menu.width
            color: root.color
            anchors.left: menu.right
            anchors.top: parent.top
            //导航栏
            Rectangle{
                id:titleBackGround
                width: parent.width
                height: 60
                
                anchors.top: parent.top
                Row{
                    id:bodyMenuRow
                    width: parent.width
                    height: parent.height
                    anchors.top: parent.top
                    
                    TitleButton{
                        id:btnport
                        titleWidth: 160
                        titleHeight: 10
                        backGroundColor:"#FFFFFF"
                        buttonPressGroundColor:"blcak"
                        buttonbackGroundColor: "#63a0f1"
                        buttonReleaseColor:"white"
                        buttonName: qsTr("添加转发")
                        onClicked: {
                            console.log('....')
                            window.addForwardInfo(80,8080,"已连接")
                        }
                    }
                    TitleButton{
                        id:btnsetting
                        
                        titleWidth: 150
                        titleHeight: 10
                        backGroundColor:"#FFFFFF"
                        buttonPressGroundColor:"blcak"
                        buttonbackGroundColor: "#63a0f1"
                        buttonReleaseColor:"white"
                        buttonName: qsTr("设置")
                        onClicked: {
                            console.log('....')
                        }
                    }
                }
                
            }
            
            //主体
            Rectangle{
                id:bodyContent
                color: "#b5c8cd"
                radius:5
                width: parent.width*0.98
                height: (parent.height - bodyMenuRow.height)*0.9
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                anchors.verticalCenterOffset: bodyMenuRow.height/2
                
                
                ListModel{
                    id:forwardModel
                    
                }
                
                GridView {
                    
                    property int inleftMargin: 50
                    
                    visible: true
                    clip: true
                    id:forwardGridView
                    anchors.fill: parent
                    width: parent.width
                    height: parent.height
                    cellWidth:width
                    cellHeight: height/5
                    
                    model:forwardModel
                    delegate: forwardDelegate
                }
                
                //GridView的每一个模块
                Component{
                    id:forwardDelegate
                    //外壳
                    Rectangle{
                        id:forwardElementShell
                        clip: true
                        width: forwardGridView.cellWidth-5
                        height: forwardGridView.cellHeight-5
                        radius: 8
                        color: "#b5c8cd"
                        DropShadow {
                            anchors.fill: forwardElement
                            horizontalOffset: 3
                            verticalOffset: 3
                            radius: 8.0
                            samples: 16
                            color: "#30000000"
                            source: forwardElement
                        }
                        Rectangle{
                            id:forwardElement
                            clip: true
                            width: forwardGridView.cellWidth-10
                            height: forwardGridView.cellHeight-20
                            radius: 8
                            anchors.horizontalCenter: parent.horizontalCenter
                            Image {
                                id: sicon
                                fillMode: Image.PreserveAspectFit
                                source: stat=="已连接"?"file:./resource/image/start.ico":"file:./resource/image/stop.ico"
                                sourceSize: Qt.size(48, 48)
                                anchors.left: parent.left
                                anchors.leftMargin: forwardGridView.inleftMargin
                                anchors.verticalCenter: parent.verticalCenter
                            }
                            
                            Text {
                                id: lPort
                                text: qsTr("本地端口: ")+localport
                                font.pixelSize: 20
                                font.family: siyuan.name
                                anchors.left: sicon.right
                                anchors.leftMargin: forwardGridView.inleftMargin
                                anchors.verticalCenter: parent.verticalCenter 
                            }
                            Text {
                                id: sPort
                                text: qsTr("远程端口: ")+serverport
                                //color: stat=="已连接"?Qt.rgba(Math.random(), Math.random(), Math.random(), 1):"#000000"
                                anchors.left: lPort.right
                                anchors.leftMargin: forwardGridView.inleftMargin
                                anchors.verticalCenter: parent.verticalCenter 
                                font.pixelSize: 20
                                font.family: siyuan.name
                            }
                            Text {
                                id: forwardStatus
                                text: qsTr("连接状态: ")+stat
                                color: stat==="已连接"?"#8cc252":"red"
                                anchors.left: sPort.right
                                anchors.leftMargin: forwardGridView.inleftMargin
                                anchors.verticalCenter: parent.verticalCenter 
                                font.pixelSize: 20
                                font.family: siyuan.name
                            }
                            
                            MyButton{
                                id:forwardOperaterEdit
                                btheight: parent.height/2
                                btwidth: 90
                                fontsize: 20
                                fontfamily: siyuan.name
                                fonttext: stat==="已连接"?"停止":"开始"
                                btnbgcolor: "orange"
                                btnpresscolor: "#000000"
                                btnreleasecolor:"#FFFFFF"
                                
                                anchors.right: forwardOperaterDelete.left      
                                anchors.rightMargin: forwardGridView.inleftMargin-25
                                anchors.verticalCenter: parent.verticalCenter      
                                onClicked: {
                                    console.log('转发开关')
                                    if(stat=="已连接"){ //当前未连接状态，需要关闭
                                        window.openForward({appPort:localport,forwardPort:serverport,appHost:appip})
                                    }else{//未连接状态，需要开启
                                        window.openForward({appPort:localport,forwardPort:serverport,appHost:appip})
                                    }
                                    
                                    
                                }
                            }
                            MyButton{
                                id:forwardOperaterDelete
                                btheight: parent.height/2
                                btwidth: 90
                                fontsize: 20
                                fontfamily: siyuan.name
                                fonttext: "删除"
                                btnbgcolor: "red"
                                btnpresscolor: "#000000"
                                btnreleasecolor:"#FFFFFF"
                                
                                anchors.right: parent.right      
                                anchors.rightMargin: forwardGridView.inleftMargin-25
                                anchors.verticalCenter: parent.verticalCenter      
                                onClicked: {
                                    window.delForwardInfo(serverport)
                                }
                            }
                            
                        }
                    }
                }//compent
                
            }
        }
        
        //}//ROW
    }
    
    //连接服务器
    function connectServer(){
        console.log("connect to Server")
        var ip = inputIp.text
        console.log('目标IP: '+ip)
        proxy.connectToServer(ip);
    }
    //断开连接服务器
    function disconnectServer(){
        proxy.dissconnectFromServer()
    }

    //开始转发
    function openForward(json){
        console.log('开始转发')
        console.log(JSON.stringify(json))
        proxy.openForward(JSON.stringify(json))
    }
    //停止转发
    function stopForward(json){
        console.log('停止转发')
        console.log(JSON.stringify(json))
        proxy.stopForward(JSON.stringify(json))
    }
    
    //服务器状态更改
    function connectStatusChange(value){
        console.log('当前状态: '+value)
        if(value===1){
            window.percent = 100
            name.text = "断开服务器"
        }else{
            window.percent = 0
            name.text = "连接服务器"
        }
    }
    
    //转发状态更改
    function forwardStatusChange(port,status){
        console.log('转发状态更改: '+status)
        console.log('端口: '+port)
        for(var i=0;i<forwardModel.count;i++){
            if(forwardModel.get(i).serverport === port){
                var oldModel = forwardModel.get(i)
                if(status === 1){
                    oldModel.stat="已连接"
                }else {
                    oldModel.stat="未连接"
                }
                forwardModel.itemsChanged(i,oldModel)
            }
        }
    }

    //打开配置文件
    function openConfig(value){
        var config = JSON.parse(value)
        
        var server_ip = config["server_ip"]
        inputIp.text = server_ip
        
        for(var i=0;i<config["forward"].length;i++){
            var appip = config["forward"][i]["appHost"]
            var appport = config["forward"][i]["appPort"]
            var forwardport = config["forward"][i]["forwardPort"]
            console.log(value)
            addForwardInfo(appip,appport,forwardport,"未连接")
        }
        
    }
    //添加连接到列表
    function addForwardInfo(appip,appport,serverport,status){
        forwardModel.append({localport:appport,
                                serverport:serverport,
                                appip:appip,
                                stat:qsTr(status)})
    }
    //删除一个连接
    function delForwardInfo(serverport){
        console.log(serverport)
        var i=0;
        for(var i=0;i<forwardModel.count;i++){
            
            if(forwardModel.get(i).serverport == serverport){
                console.log('remove: '+serverport)
                forwardModel.remove(i)
                return
            }
        }
    }
    
    //组件完成时连接C++的信号
    Component.onCompleted: {
        proxy.signal_ConnectStatusChange.connect(connectStatusChange)
        proxy.signal_ForwardStatusChange.connect(forwardStatusChange)
        proxy.signal_OpenConfig.connect(openConfig)
        proxy.openConfig()//手动调用获取配置文件的json，然后通过上面的信号返回给我们
    }
}


/*##^##
Designer {
    D{i:0;formeditorZoom:0.75}
}
##^##*/
